<template>
  <div class="app-fullscreen" @click="handleFullScreen">
    <a-tooltip :title="title">
      <FullscreenOutlined v-if="isFullScreen" />
      <FullscreenExitOutlined v-else />
    </a-tooltip>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'
import Screenfull from 'screenfull'

export default defineComponent({
  name: 'FullScreen',
  components: {
    FullscreenOutlined,
    FullscreenExitOutlined,
  },
  setup() {
    const isFullScreen: Boolean = ref(true)
    const title: string = isFullScreen.value ? '退出全屏' : '全屏'

    return {
      title,
      isFullScreen,
    }
  },
  methods: {
    handleFullScreen() {
      if (!Screenfull.isEnabled) {
        // Message.warning('you browser can not work')
        return false
      }
      Screenfull.toggle()
      this.isFullScreen = Screenfull.isFullscreen
    },
  },
})
</script>

<style lang="scss">
.app-fullscreen {
  display: inline-block;
  font-size: 25px;
  margin-right: 15px;
  height: 100%;
  cursor: pointer;
  vertical-align: middle;
}
</style>
